<!-- Terminal.vue -->

<template>
	<div class="terminal" ref="terminalOutput" @mouseenter="mouseOver = true" @mouseleave="mouseOver = false">
		<!-- 终端输出内容 -->
		<div v-for="(line, index) in output" :key="index" class="terminal-line">{{ line }}</div>
	</div>
</template>

<script setup lang="ts" name="TerminalWindow">
const terminalOutput = ref();
const output = ref<string[]>([]);

const mouseOver = ref(false);

// 写入
function write(message: string) {
	output.value.push(`$ ${message}`);
	// 鼠标移入就不进行滚动到底的操作，方便用户查看或者拷贝日志
	if (mouseOver.value === true) return;
	nextTick(() => {
		// 保证滚动条永远在最底部
		terminalOutput.value.scrollTop = terminalOutput.value.scrollHeight;
	});
}

// 清空
function clear() {
	output.value = [];
}

defineExpose({
	write,
	clear
});
</script>

<style scoped lang="scss">
.terminal {
	font-family: monospace;
	background-color: #000;
	color: yellow;
	padding: 10px;
	width: 100%;
	height: 100%;
	overflow-y: scroll;

	.terminal-line {
		white-space: pre-wrap;
	}
}
</style>
